<template>
  <view class="my-coupon" :style="my_style">
    <view class="tabs-box">
      <u-tabs
        ref="uTabs"
        :current="current"
        :list="tabs"
        :is-scroll="false"
        :active-color="theme_color"
        inactive-color="#999"
        @change="tabsChange"
      />
    </view>
    <view class="u-p-30">
      <common-list @load="userCoupon" :list="list" :status="status">
        <template #list>
          <coupon-item
            v-for="(item, index) in list"
            :key="index"
            :item="item"
            :right="tabs[current].right"
          >
          </coupon-item>
        </template>
        <template #empty>
          <empty text="优惠券列表空空如也～"></empty>
        </template>
      </common-list>
    </view>
  </view>
</template>

<script>
  import CouponItem from '@/components/common/CouponItem.vue'
  export default {
    data() {
      return {
        tabs: [
          {
            name: '未使用',
            state: 1,
            right: '立即使用',
          },
          {
            name: '已使用',
            state: 2,
            right: '已使用',
          },
          {
            name: '已过期',
            state: 3,
            right: '已过期',
          },
        ],
        current: 0, // tabs组件的current值，表示当前活动的tab选项
        swiper_current: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
        page: 1,
        list: [],
        status: 'loading',
      }
    },
    watch: {},
    components: {
      CouponItem,
    },
    onLoad(options) {
      this.userCoupon()
    },
    methods: {
      // tabs通知swiper切换
      tabsChange(index) {
        this.current = index
        this.refreshList(this.userCoupon)
      },
      /**
       * 用户优惠券
       */
      async userCoupon() {
        const { page, limit, current, tabs } = this
        let params = {
          page,
          limit,
          state: tabs[current].state,
        }
        this.status = 'loading'
        const res = await this.$api.common.promotion('userCoupon', params)
        if (res.code === 200) {
          const { count, list } = res.data
          this.list = [...this.list, ...list]
          if (this.list.length >= count) {
            // 所有数据加载完毕
            this.status = 'nomore'
            return
          }
          // 单次请求数据完毕
          this.status = 'loadmore'
          this.page = this.page + 1
        }
      },
      loadmore() {
        if (this.status === 'loadmore') {
          this.refreshList(this.userCoupon)
        }
      },
      onReachBottom() {
        uni.$emit('onReachBottom')
      },
      onPullDownRefresh() {
        uni.$emit('onPullDownRefresh')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .my-coupon {
    height: 100%;

    &-list {
      padding: 40rpx 30rpx;
      box-sizing: border-box;
    }
  }
</style>
